<template>
    <div>
        
        <el-form ref="editForm" :model="formFileds" style="margin-top:10px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item>
                        <el-input v-model="formFileds.text" prefix-icon="el-icon-search" placeholder="查询">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新
                        </el-button>
                        <el-button type="primary" icon="el-icon-download">下载帮助手册
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;" border stripe
            highlight-current-row :default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick"
            @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
            :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
            <el-table-column type="selection"></el-table-column>
            <el-table-column property="pmhmc" label="拍卖会名称">
            </el-table-column>
            <el-table-column property="pmhlx" label="拍卖会类型">
            </el-table-column>
            <el-table-column property="pmhzt" label="拍卖会状态">
            </el-table-column>
            <el-table-column property="kpsj" label="开拍时间" width="200">
            </el-table-column>
            <el-table-column property="pmggmc" label="所属公告">
            </el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-dropdown @command="handleCommand">
                        <el-button type="primary">
                        操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-if="scope.row.pmhzt == '未开拍'" :command="beforeHandleCommand('start',scope.row)">主持</el-dropdown-item>
                            <el-dropdown-item v-else-if="scope.row.pmhzt == '已结束'" :command="beforeHandleCommand('check',scope.row)">查看</el-dropdown-item>
                            <div v-else>
                                <el-dropdown-item v-if="scope.row.pmhzt == '开拍中'" :command="beforeHandleCommand('stop',scope.row)">暂停</el-dropdown-item>
                                <el-dropdown-item v-else :command="beforeHandleCommand('goOn',scope.row)">继续</el-dropdown-item>

                                <el-dropdown-item :command="beforeHandleCommand('finish',scope.row)">结束</el-dropdown-item>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- <el-button v-if="scope.row.pmhzt == '已结束'" type="primary" round size="small">查看</el-button>
                   
                    <el-button v-else-if="scope.row.pmhzt == '未开拍'" type="primary" round size="small" @click="start(scope.row)">主持</el-button>

                    <div v-else>
                        <el-button v-if="scope.row.pmhzt != '暂停'" type="primary" round size="small" @click="stop(scope.row)">暂停</el-button>
                        <el-button v-else type="success" round size="small" @click="goOn(scope.row)">继续</el-button>

                        <el-button type="danger" round size="small" @click="finish(scope.row)">结束</el-button>
                    </div> -->

                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top:25px">
            <el-button type="primary" round size="small">暂停</el-button>
            <el-button type="danger" round size="small">结束</el-button>
        </div>
        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size=this.pageSize :total=this.total :current-page="currentPage" 
        layout="total, sizes, prev, pager, next, jumper" @current-change="getCurrentPage" @size-change="getSize">
        </el-pagination>

    </div>
</template>
      
<script>
// import router from '@/router/index';
import { getAll,stateChange } from '@/api/auctioneerBackstage/auctioneerBackstage';
import { editData } from '@/api/auctionManage/auctionManage';
export default {
    name: "backstage",
    components: {
    },
    data () {
        return {
            formFileds: {
                text: ''
            },
            tableData: [
                
            ],
            pageSize: 10,
            total: 0,
            currentPage: 1,
        }
    },
    methods: {
        refresh () {
            this.$router.go(0);
        },

        handleRowClick (row, event, column) {

            // 仅选中当前行
            // this.setCurRowChecked(row);
            console.log(row);
        },
        handleCheckedAllAndCheckedNone (selection) {

            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.list.setCurrentRow();
        },
        formatTime(time){
            var dateee = new Date(time).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
        },
        handleCommand(command){
            if(command.command == 'start'){
                this.start(command.row);
            }
            else if(command.command == 'stop'){
                this.stop(command.row);
            }
            else if(command.command == 'goOn'){
                this.goOn(command.row);
            }
            else if(command.command == 'finish'){
                this.finish(command.row);
            }
            else{
                this.check(command.row);
            }
        },
        beforeHandleCommand(command,row){
            return{
                'command': command,
                'row': row
            }
        },
        getCurrentPage(currentPage){
            // console.log(currentPage);
            this.currentPage = currentPage;
            if(this.formFileds.text){
                // this.search();
            }
            else{
                this.getList();
            }
            
        },
        getSize(pageSize){
            // console.log(pageSize);
            this.pageSize = pageSize;
            if(this.formFileds.text){
                // this.search();
            }
            else{
                this.getList();
            }
        },
        deepClone(obj) {
            var obj1 = JSON.stringify(obj) //  对象转成字符串
            var obj2 = JSON.parse(obj1) //  字符串转成对象
            return obj2;
        },
        getList(){
            let data = 'pageno=' + this.currentPage + '&countonepage=' + this.pageSize + '&pmsbh=111111';
            getAll(data).then((res) => {
                if(res){
                    // console.log(res);
                    this.total = res.data.total;
                    this.tableData = res.data.list;
                    for(let item of this.tableData){
                        item.kpsj = this.formatTime(item.kpsj);
                    }
                }
            })
        },
        start(row){

            let data = this.deepClone(row);
            data.pmhzt = '开拍中';
            data.bmjzsj = this.formatTime(data.bmjzsj);
            // editData(data).then((res) => {
            //     if(res){
            //         this.getList();
            //     }
            // });
            this.$router.push({
                path: '/notStarted',
                query: {
                    pmhbh: row.pmhbh,
                    kpsj: row.kpsj
                }
            });
            // window.open('@/views/auctioneerBackstage/notStarted/notStarted.vue',self);
        },
        stop(row){
            let data = this.deepClone(row);
            data.pmhzt = '暂停';
            data.bmjzsj = this.formatTime(data.bmjzsj);
            delete data.pmggmc;
            // console.log(data);
            stateChange(data).then((res) => {
                if(res){
                    console.log(res);
                    this.getList();
                }
            })
        },
        goOn(row){
            let data = this.deepClone(row);
            data.pmhzt = '开拍中';
            data.bmjzsj = this.formatTime(data.bmjzsj);
            delete data.pmggmc;
            // console.log(data);
            stateChange(data).then((res) => {
                if(res){
                    console.log(res);
                    this.getList();
                }
            })
        },
        finish(row){
            let data = this.deepClone(row);
            data.pmhzt = '已结束';
            data.bmjzsj = this.formatTime(data.bmjzsj);
            delete data.pmggmc;
            // console.log(data);
            stateChange(data).then((res) => {
                if(res){
                    console.log(res);
                    this.getList();
                }
            })
        },
        check(row){
            this.$message.warning('该功能正在开发中');
            return ;
        }

    },
    mounted(){
        this.getList();
    }
}
</script>
      
<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
      